<template>
    <div>
        <div class="mian">
            <div class="content">
                <div class="topView">
                    <div class="leftTextView">
                        <div class="title">
                            课程分类
                        </div>
                        <div class="linkView">
                        <el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
                        </div>
                    </div>
                    <div class="carousel">
                        <el-carousel :interval="4000" type="card" height="200px">
                            <el-carousel-item v-for="item in carouselView" :key="item">
                                <el-image :src="item"></el-image>
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                    <div class="rightTextView">
                        <div class="title">
                            政策动态
                        </div>
                        <div class="linkView" v-for="item in policy_correlation" :key="item.cid">
                            <el-link :href=item.curl target="_blank">{{item.ctitle}}</el-link>
                            <div class="timeText">发布时间：{{item.ctime}}</div>
                        </div>
                        <div style="float:right;margin-top:10px;">
                            <router-link target="_blank" to="/" style="color: rgb(121, 121, 121);font-size: 15px;font-weight: 500;">
                                更多动态<i class="el-icon-arrow-right"></i></router-link>
                        </div>
                    </div>
                </div>
                <div class="centerView">
                    <el-card shadow="hover">
                        <div class="cardView">
                            <div class="cardTitle">
                                院校信息
                            </div>
                            <div class="schoolView" v-for="school in schoolContent" :key="sid">
                                <el-link :href=school.snameUrl >{{ school.sname }}</el-link>
                            </div>
                            <div class="moreView" style="float:right;">
                                <router-link target="_blank" to="/" style="color: rgb(121, 121, 121);font-size: 15px;font-weight: 500;">
                                更多院校<i class="el-icon-arrow-right"></i></router-link>
                            </div>
                        </div>
                    </el-card>
                </div>
            </div>
        </div>
        <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
    </div>
</template>
<script>
import Axios from 'axios';
export default {
   data() {
      return {
        localhost:this.global.localhost,
        policy_correlation:[], 
        schoolContent:[],
        specializedTypeContent:[],
        carouselView:[
            'https://nos.netease.com/edu-image/26cada70ae9948f3a0eebde8916b6e8b.jpg',
            'http://mooc-image.nosdn.127.net/ef30f3089541433e886c7a4e8a2f2e78.png',
            'https://edu-image.nosdn.127.net/11FFE96FB0BC124C397CC5E3B09CD10E.jpg?imageView&thumbnail=510y288&quality=100'
        ]
      }
   },
   created(){
    const that=this;
    Axios.get(that.localhost+'/policyCorrelation/findAll/1/3').then(function(res){
            console.log(res.data.content);
            that.policy_correlation=res.data.content;
    }).catch(function(res){
            console.log(res);
    });
    Axios.get(that.localhost+'/school/findAll/1/11').then((res) => {
        console.log(res.data.content[0]);
        res.data.content.forEach(element => {
            // console.log(element);
            var schoolInfo={
                sid:element.sid,
                sname:element.sname,
                snameUrl:element.snameUrl
            }
            this.schoolContent.push(schoolInfo);
            console.log(this.schoolContent);
        });
    }
    )
    
    Axios.get(that.localhost+'/specializedType/findAll/1/11').then((res) => {
        res.data.content.forEach(element => {
            var specializedTypeInfo={
                id:element.id,
                specializedName:element.specializedName,
                delete:element.delete
            }
            this.specializedTypeContent.push(specializedTypeInfo);
        });
    }
    )
   },
   computed:{
   },
   methods:{
   },
}
</script>
<style scoped>
.centerView /deep/ .el-card{
    width: 100%;
}
.centerView .cardView{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
}
.centerView .cardView .moreView{
    margin-left: 7%;
}
.centerView .cardView .schoolView{
    margin-left: 10px;
}
     .rightTextView,.leftTextView .title{
        font-size: 18px;
        font-weight: 600;
    }
    .rightTextView .linkView{
        margin-top: 10px;
    }
    .rightTextView .linkView .timeText{
        font-size: 8px;
        color: rgb(121, 121, 121);
        font-weight: 100;
    }
    .leftTextView .linkView{
        margin-top: 10px;
    }
    .rightTextView .linkView .el-link{
        word-break: break-all;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }
    .rightTextView,.leftTextView{
        width: 240px;
        min-width: 240px;
        padding: 10px;
    }
    .centerView{
        width: 100%;
        min-width: 1250px;
        margin-top: 30px;
        /* background-color: #fff;
        border-radius: 20px;
        padding: 10px; */
    }
    .topView{
        width: 100%;
        min-width: 1225px;
        display: flex;
        background-color: #fff;
        border-radius: 20px;
        flex-direction: row;
        padding: 20px;
    }
    .carousel{
        width: 100%;
    }
    .mian{
        min-width: 1200px;
        display: flex;
        justify-content: center;
    }
    .content{
        width: 85%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .el-carousel__item h3 {
    color: #365f95;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
